<template>
  <div class="directory-form">
    <!-- 弹层 -->
    <el-dialog
      :title="titleInfo.text + titleInfo.pageTitle"
      :visible.sync="dialogFormVisible"
      width="21%">

      <!-- 表单 -->
      <el-form
        :model="form"
        :rules="rules"
        ref="dataForm"
        label-position="left"
        label-width="80px"
        style="width: 100%; margin-left:10px;">

        <el-form-item
          label="所属学科" label-width="80px" v-if="hide" prop="subjectID">
          <el-select
            v-model="form.subjectID"
            style="width:100%">
            <el-option
              v-for="item in subjects"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="目录名称" prop="directoryName">
          <el-input
            type="text"
            v-model="form.directoryName"
            placeholder="请输入目录名称">
          </el-input>
        </el-form-item>
      </el-form>
      <!-- 表单 -->

      <div slot="footer" class="dialog-footer">
        <!-- 取消 -->
        <el-button
          @click="dialogFormH">
          {{$t('table.cancel')}}
        </el-button>

        <!-- 确定 -->
        <el-button
          type="primary"
          @click="createData">
          {{$t('table.confirm')}}
        </el-button>

      </div>
    </el-dialog>
    <!-- 弹层end -->
  </div>
</template>
<script>
// 引入目录修改和新增目录的接口
import { update, add } from '@/api/hmmm/directorys.js'

// 获取学科简单列表的接口
import { simple } from '@/api/hmmm/subjects.js'

export default {
  name: 'directorysAdd',
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    formBase: {
      type: Object,
      required: true
    }
  },

  watch: {
  // 监听formBase的最新值
    formBase (newvalue) {
      this.form = { ...newvalue }
    }
  },
  data () {
    return {
      dialogFormVisible: false, // 弹层是否显示
      hide: true, // 返回学科和面包屑是否显示
      subjects: [], // 学科简单列表的数据
      form: { ...this.formBase }, // 给form赋值
      // 表单验证
      rules: {
        directoryName: [{ required: true, message: '请输入目录', trigger: 'blur' }],
        subjectID: [{ required: true, message: '请选择学科', trigger: 'change' }]
      }
    }
  },

  methods: {
    // 弹层显示
    dialogFormV () {
      this.discipline()
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate()
      })
      this.hide = !this.$route.query.id
    },

    // 弹层隐藏
    dialogFormH () {
      this.dialogFormVisible = false
    },

    // 添加目录
    async addDir () {
      try {
        await add(this.form)
        this.$emit('newData', 1)
        this.$message.success('操作成功')
      } catch (err) {
        console.log(err)
        this.$message.error('操作失败')
      }
    },

    // 表单提交
    createData () {
      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          this.dialogFormH()
          const data = {
            ...this.form
          }
          if (this.form.id) {
            try {
              await update(data)
              this.$emit('newData')
              this.$message.success('操作成功')
            } catch (err) {
              console.log(err)
              this.$message.error('操作失败')
            }
          } else {
            if (this.$route.query.id) {
              this.form.subjectID = Number(this.$route.query.id)
              this.addDir()
            } else {
              this.addDir()
            }
          }
        } else {
          this.$message.error('*号为必填项!')
        }
      })
    },

    // 获取学科简单列表
    async discipline () {
      try {
        const { data: res } = await simple()
        this.subjects = res
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-form--label-left .el-form-item__label {
  text-align: right;
}
.el-form-item--medium {
  margin-bottom: 22px;
}
.el-dialog__footer {
  text-align: right
}
</style>
